<template>
	<view class="guide-container">
		<swiper class="guide-swiper" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500"
			indicator-color="rgba(0, 0, 0, 0.2)" indicator-active-color="#4A90E2" :circular="true"
			@change="onSwiperChange">
			<swiper-item v-for="(item, index) in guideList" :key="index" class="swiper-item">
				<view class="guide-item">
					<image :src="item.image" class="guide-image" mode="aspectFit"></image>
					<view class="guide-title">{{ item.title }}</view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 立即体验按钮 - 只在最后一页显示 -->
		<view class="button-container" v-if="currentIndex === guideList.length - 1">
			<button class="experience-btn" @click="goToLogin">立即体验</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 响应式数据
const currentIndex = ref(0)
const guideList = ref([
	{
		image: '/static/1.png',
		title: '电子服务包'
	},
	{
		image: '/static/2.png',
		title: '健康档案'
	},
	{
		image: '/static/3.png',
		title: '在线签约'
	},
	{
		image: '/static/4.png',
		title: '在线咨询'
	}
])

// 方法定义
const onSwiperChange = (e) => {
	currentIndex.value = e.detail.current
}

const goToLogin = () => {
	// 使用 reLaunch 清除页面栈，防止用户返回到引导页
	uni.reLaunch({
		url: '/pages/login/login'
	})
}
</script>

<style scoped>
.guide-container {
	width: 100%;
	height: 90vh;
	display: flex;
	flex-direction: column;
}

.guide-swiper {
	flex: 1;
	width: 100%;
}

.swiper-item {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.guide-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 40rpx;
}

.guide-image {
	width: 600rpx;
	height: 600rpx;
	margin-bottom: 60rpx;
}

.guide-title {
	font-size: 36rpx;
	font-weight: 400;
	color: #4A90E2;
	text-align: center;
	margin-bottom: 40rpx;
}

.button-container {
	position: absolute;
	bottom: 450rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0 60rpx;
}

.experience-btn {
	width: 500rpx;
	height: 88rpx;
	background: #4A90E2;
	color: white;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, 0.3);
}

.experience-btn:active {
	background: #3A7BC8;
	transform: scale(0.98);
}

/* 自定义指示器样式 */
.guide-swiper ::v-deep .uni-swiper-dots {
	bottom: 80rpx;
}

.guide-swiper ::v-deep .uni-swiper-dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 8rpx;
	margin: 0 8rpx;
}

.guide-swiper ::v-deep .uni-swiper-dot-active {
	background-color: #4A90E2 !important;
}
</style>
